<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>利用JavaScript动态改变网页字体大小</title>
    <style type="text/css">
        h3, h5 {
            text-align: center;
        }

        #main_box {
            width: 70%;
            margin: 0 auto;
        }

        #content {
            text-indent: 2em;
            border: 1px solid green;
            background: #8c8c8c;
            line-height: 1.5em;
        }

        span {
            text-decoration: underline;
            color: blue;
        }
    </style>
</head>
<body>
<div id="main_box">
    <h3>用JavaScript改变网页中字号</h3>
    <h5>选择字号【<span id="small" onclick="change_small()">小</span> <span id="medium" onclick="change_medium()">中</span>
        <span id="large" onclick="change_large()">大</span>】</h5>
    <div id="content">JavaScript是一种能让你的网页更加生动活泼的程式语言，也是目前网页中设计中最容易学又最方便的语言。
        你可以利用JavaScript轻易的做出亲切的欢迎讯息、漂亮的数字钟、有广告效果的跑马灯及简易的选举，还可以显示浏览器停留的时间。让这些特殊效果提高网页的可观性。
    </div>
</div>
<script type="text/javascript">
    var x = document.getElementById("small").style.color;

    function change_small() {
        document.getElementById("content").style.fontSize = "small";
        document.getElementById("small").style.color = "red";
        document.getElementById("medium").style.color = x;
        document.getElementById("large").style.color = x;
    }

    function change_medium() {
        document.getElementById("content").style.fontSize = "medium";
        document.getElementById("small").style.color = x;
        document.getElementById("medium").style.color = "red";
        document.getElementById("large").style.color = x;
    }

    function change_large() {
        document.getElementById("content").style.fontSize = "large";
        document.getElementById("small").style.color = x;
        document.getElementById("medium").style.color = x;
        document.getElementById("large").style.color = "red";
    }
</script>
</body>
</html>